<template>
	<div class="task-item row-v task-status" :class="'ts' + status ">
		<div class="caption">
			<h5 class="qikux-manage">
				<b class="qikux-lv" :class="'qikux-leave-' + leave">{{leaveName}}</b>{{stageName}}
			</h5>
			<h6>{{moduleName}}</h6>
		</div>
		<p v-html="title"></p>
		<div class="controls">
			<a class="btn" href="javascript:void(0)" @click="previewTask">查看</a>
			<a class="btn" href="javascript:void(0)" v-if="status === 0">开始</a>
			<a class="btn" href="javascript:void(0)" @click="submitCode" v-if="status === 1 || status === 2">提交</a>
			<a class="btn" href="javascript:void(0)" v-if="status === 3 || status === 4 || status === -1">修改</a>
			<a class="btn" href="javascript:void(0)" v-if="status === 4">完成</a>
		</div>
	</div>
	
</template>

<script>
export default {
	props: {
		leave: {type: Number, required: true},
		id: {type: Number, required: true},
		stage: {type: [Number, String], required: true},
		moduleName: {type: String, required: true},
		title: {type: String, required: true},
		status: {type: Number, required: false} ,
	},
	computed: {
		leaveName() {
			switch(this.leave) {
				case 1: return '简单题';
				case 2: return '中等题';
				case 3: return '难题';
				case 4: return '选做题';
			}
		},
		stageName() {
			if (typeof this.stage === 'string') return this.stage ;
			switch(this.stage) {
				case 1: return '第一阶段';
				case 2: return '第二阶段';
				case 3: return '第三阶段';
				case 4: return '第四阶段';
				case 5: return '第五阶段';
				default: '未知数据'
			}
		}
	},
	methods: {
		previewTask() {
			this.$layer.open({
				type: 2,
				title: '查看任务',
				shadeClose: true,
				shade: 0.5,
				area: ['1300px', '780px'],
				btn: ['保存', '关闭'] ,
				content: '/task/preview',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		},
		submitCode() {
			this.$layer.open({
				type: 2,
				title: '提交任务',
				shadeClose: true,
				shade: 0.5,
				area: ['1300px', '780px'],
				btn: ['保存', '关闭'] ,
				content: '/task/code',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		}
	}
}
</script>

<style scoped>
.task-item {
	position: relative;
	width: 25%;
	max-width: 315px;
	height: 300px;
	border: 1px solid #eee;
	text-align: center;
	box-shadow: 2px -2px 10px #ccc;
	box-sizing: border-box;
}	

.task-item .caption {
    position: relative;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    color: #fff;
}

.task-item .caption h5, .task-item .caption h6 {
    width: 50%;
    font-weight: 400;
    float: left;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.task-item .caption h5 {
    font-size: 20px;
    background-color: #01AAED;
    vertical-align: top;
    height: 40px;
}

.task-item .caption h5::after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-width: 20px; /* 设置边长 */
    border-style: solid;
    border-color: transparent transparent #5FB878 transparent;
}

.task-item .caption h6 {
    font-size: 16px;
    background-color: #5FB878;
}

.task-item .caption h6::after {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    width: 0;
    height: 0;
    border-width: 20px; /* 设置边长 */
    border-style: solid;
    border-color: #01AAED transparent transparent transparent;
}

.task-item p {
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
    height: 165px;
}

.task-item .controls {
    border-top: 1px solid #eee;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    z-index: 1;
}

.task-item .controls a {
    padding: 0 15px;
    color: #333;
}


.row-v {
	display: flex;
	flex-direction: column;
}

.task-status::after {
    position: absolute;
    width: 80px;
    height: 40px;
    right: 20px;
    bottom: 60px;
    color: #f9f9f9;
    font-size: 14px;
    line-height: 40px;
    border-radius: 8px;
    transform: rotate(-20deg);
    z-index: 9;
    cursor: pointer;
}

.task-status::after:hover {
    transform: translateY(10px) rotate(0deg);
    transition: transform 0.5s ease;
}

.task-status.ts0::after {
    content: '未开始';
    background-color: #393D49;
}

.task-status.ts1::after {
    content: '进行中';
    background-color: #1E9FFF;
}

.task-status.ts2::after {
    content: '需讲解';
    background-color: #FFB800;
}

.task-status.ts3::after {
    content: '已提交';
    background-color: #5FB878;
}

.task-status.ts4::after {
    content: '已检查';
    background-color: #009688;
}

.task-status.ts5::after {
    content: '已完成';
    background-color: #c2c2c2;
}

.task-status.ts-1::after {
    content: '异常题';
    background-color: #FF5722;
}
	
.qikux-manage {
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
}

.qikux-lv {
    display: inline-block;
    width: 40px;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: top;
    letter-spacing: 100px;
    position: relative;
    user-select: none;
    margin-left: -10px;
    margin-right: 5px;
    box-sizing: border-box;
    padding-left: 10px;
}

.qikux-lv::before {
    position: absolute;
    content: '【';
    width: 16px;
    letter-spacing: 2px;
    color: #fff;
    left: -10px;
}

.qikux-lv::after {
    position: absolute;
    content: '】';
    width: 16px;
    left: 30px;
    color: #fff;
    margin-right: 15px;
}

.qikux-leave-1 {
    color: #FFF;
}

.qikux-leave-2 {
    color: #c85ff1;
}

.qikux-leave-3 {
    color: #FFB800
}

.qikux-leave-4 {
    color: #FF5722;
}
</style>